<template>
  <div class='determine'>
    <div class='operating'
         v-if='bar.condition'>
      <i class="playing"
         :style="{'backgroundPosition':(bar.use?'0 -45px':'0 0')}"
         @click="playing"></i>
      <i class="finish"
         :style="{'backgroundPosition':(finsish?'-160px -40px':'-160px 0')}"
         @click="ending(false)"></i>
    </div>
    <div class="bar">
      <div class="bar-conte">
        <div class="description">
          <span>{{bar.text|textThinking}}</span>
        </div>
        <div class="fff-back"
             :style="{width:bar.operatingSchedule+'%'}"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { clearInterval } from 'timers'
import { roundOf, clone } from "@/assets/js/cardsEvent.js";
import { type } from 'os';
let that
export default {
  data () {
    return {
      //  判断是技能图标还是出牌阶段的图标
      finsish: false,
      inter: undefined
    }
  },
  props: {
    bar: {
      type: Object
    },
    show: {
      type: Object
    },
    Leg: {
      type: Array
    },
    recording: {
      type: Object
    },
    playCard: {
      type: Function
    }
  },
  beforeCreate () {
    that = this
  },
  created () {
    let _stage = this.bar.stage
    if (_stage === 3 || _stage === 4) {
      this.finsish = true
    } else {
      this.finsish = false
    }
  },
  mounted: function () {
    this.inter = this.barTime()
  },
  methods: {
    barTime () {
      return setInterval(() => {
        if (this.bar.operatingSchedule > 0) {
          this.bar.operatingSchedule -= 10
        } else {
          switch (this.bar.stage) {
            case 3:
              this.ending(false)
              break
            case 4:
              this.ending(true)
              break
            case 6:
              let evenName = ''
              if (this.show.name === '过河拆桥') {
                evenName = 'del'
              } else {
                evenName = 'add'
              }
              this.$emit(evenName, this.Leg, this.Leg[this.show.userId], 0)
              this.bar.operatingSchedule = 100
              break
            case 8:
            case 10:
              this.Leg[this.bar.id].SHP--
              roundOf.call(this.$parent, 3, this.Leg[this.recording.id])
              this.$parent.post.bar = clone(this.recording)
              this.Leg[0].stage = -1
              this.Leg[this.recording.id].endRound()
              break
            default:
              break
          }
        }
      }, 1000)
    },
    playing () {
      if (this.bar.use) {
        switch (this.bar.stage) {
          case 3:
            if (this.bar.cardsLeg !== -1) {
              this.playCard(this.bar.cardsLeg, this.Leg[0], "打出")
            }
            break
          case 4:
            this.ending(true)
            break
          case 8:
            if (this.bar.cardsLeg !== -1) {
              this.playCard(this.bar.cardsLeg, this.Leg[0], "")
              roundOf.call(this.$parent, 3, this.Leg[this.recording.id])
              this.$parent.post.bar = clone(this.recording)
              this.Leg[0].stage = -1
              this.Leg[this.recording.id].endRound()
            }
            break
          case 10:
            if (this.bar.cardsLeg !== -1) {
              this.playCard(this.bar.cardsLeg, this.Leg[0], "")
              let aimsLeg = this.bar.user != 0 ? this.Leg[this.bar.user] : this.Leg[this.Leg[0].aims]
              roundOf.call(this.$parent, -1, this.Leg[0])
              roundOf.call(this.$parent, 10, this.Leg[aimsLeg.id])
              setTimeout(() => {
                for (let i = 0; i < aimsLeg.hands.length; i++) {
                  const element = aimsLeg.hands[i];
                  if (element.name === "杀") {
                    this.$set(aimsLeg.hands, i, this.$parent.searchCard(element.id));
                    this.playCard(i, aimsLeg, "打出")
                    roundOf.call(this.$parent, -1, aimsLeg)
                    roundOf.call(this.$parent, 10, this.Leg[0])
                    break
                  } else {
                    if (i === aimsLeg.hands.length - 1) {
                      aimsLeg.SHP--
                      roundOf.call(this.$parent, -1, aimsLeg)
                      roundOf.call(this.$parent, 3, this.Leg[0])
                      this.Leg[0].aims = -1;
                      break
                    }
                  }
                }
              }, 1000);
            }
          default:
            break
        }
      }
    },
    ending (bol) {
      switch (this.bar.stage) {
        case 4:
          this.$emit('endRound1', true)
          break
        case 8:
          const _stage = this.bar.stage
          this.Leg[this.bar.id].SHP--
          roundOf.call(this.$parent, 3, this.Leg[this.recording.id])
          this.$parent.post.bar = clone(this.recording)
          this.Leg[0].stage = -1
          if (_stage === 8) this.Leg[this.recording.id].endRound()
          break;
        case 10:
          this.Leg[this.bar.id].SHP--
          roundOf.call(this.$parent, -1, this.Leg[this.bar.id])
          roundOf.call(this.$parent, 3, this.Leg[this.bar.user])
          break;
        default:
          this.$emit('endRound1', bol)
          break
      }
      // this.barTime()
    }
  },
  destroyed: function () {
    window.clearInterval(this.inter)
  },
  computed: {
  },
  watch: {
  },
  filters: {
    textThinking: function (newValue) {
      if (that.bar.id !== 0) {
        return newValue + ",思考中..."
      } else {
        return newValue
      }
    }
  }
}

</script>
<style scoped>
.determine {
  position: absolute;
  top: 0;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
}

.operating {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

i {
  background: url("../game/icon-spa.png") no-repeat;
  transition: background 0.3s;
  cursor: pointer;
}

.playing {
  margin-right: 200px;
  width: 160px;
  height: 45px;
}

.finish {
  width: 110px;
  height: 40px;
}

.bar {
  order: 2;
}

.bar {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.bar-conte {
  position: relative;
  width: 70%;
  height: 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
}

.description {
  position: absolute;
  font-size: 1.4em;
  color: #fff;
  top: -20px;
  left: 50%;
  margin-left: -151px;
  letter-spacing: 2px;
}

.fff-back {
  float: left;
  height: 100%;
  border-radius: 5px;
  background: rgb(255, 102, 0);
  transition: width 1.1s linear;
}
</style>
